var scene, camera, light, renderer, mesh, group, objResetGroup, geometry, container;
var loadManager, objLoader;
var status, monitor;
var cameraParams = {};
var width, height;
var theta = 0, radius = 10, mouse;
function initEnv() {
  width = window.innerWidth;
  height = window.innerHeight;

  container = document.getElementById("container");
  mouse = new THREE.Vector2(0, 0);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  light = new THREE.DirectionalLight(0xffffff, 1);
  renderer = new THREE.WebGLRenderer({ antialias: false });
  renderer.setSize(width, height);
  renderer.setClearColor(0xf0f0f0)
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.sortObjects = false;

  camera.position.x = 0;
  camera.position.y = 280;
  camera.position.z = 650;
  camera.lookAt({
    x: 0, y: 0, z: 0
  })
  light.position.set(1, 1, 1);
  scene.add(light);
  // scene.add(new THREE.AmbientLight(0x3e3e3e));
  container.appendChild(renderer.domElement);
}


function initStatus() {
  stats = new Stats();
  stats.domElement.style.position = "absolute";
  stats.domElement.style.top = "0px";
  container.appendChild(stats.domElement);
  container.appendChild(renderer.domElement);
}

function initMonitor() {
  cameraParams.up = {};
  cameraParams.x = 0;
  cameraParams.y = 280;
  cameraParams.z = 650;

  monitor = new DAT.GUI();
  monitor.add(cameraParams, "x", -2000, 2000).name("相机X的位置");
  monitor.add(cameraParams, "y", -2000, 2000).name("相机Y的位置");
  monitor.add(cameraParams, "z", -2000, 5000).name("相机Z的位置");
}

function initObj() {
  let num = 2000;
  geometry = new THREE.BoxGeometry(100, 100, 100);
  console.log("face", geometry, geometry.faces)
  for (let i = 0; i < geometry.faces.length; i += 2) {
    var hex = Math.random() * 0xffffff;
    geometry.faces[i].color.setHex(hex);
    geometry.faces[i + 1].color.setHex(hex);
  }
  let material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors });
  group = new THREE.Group()
  mesh = new THREE.Mesh(geometry, material);
  group.position = new THREE.Vector3(0, 0, 0);
  mesh.position = new THREE.Vector3(0, 0, 0);
  let axisHelp = new THREE.AxisHelper(200);
  axisHelp.position.copy(mesh.position);

  group.add(axisHelp)
  group.add(mesh);
  // mesh.translateX(50);
  // mesh.translateZ(-50);
  // group.translateX(-50);
  // group.translateZ(50);
  console.log("group", mesh)
  scene.add(group);
}

function initModel() {
  loadManager = new THREE.LoadingManager();
  objLoader = new THREE.OBJLoader(loadManager);

  function loaded(obj) {

    let axisHelp1 = new THREE.AxisHelper(200);
    let axisHelp2 = new THREE.AxisHelper(200);
    let boxHelper = new THREE.BoxHelper(obj);
    objResetGroup = new THREE.Group();
    let box3 = new THREE.Box3().setFromObject(obj).center(objResetGroup.position);
    let { x, y, z } = objResetGroup.position;
    axisHelp1.position.copy(obj.position);
    obj.translateX(- x);
    obj.translateY(- y);
    obj.translateZ(- z);
    
    objResetGroup.add(obj);
    objResetGroup.add(boxHelper);
    objResetGroup.add(axisHelp1);
    scene.add(objResetGroup)
    console.log("obj", objResetGroup, obj, boxHelper, box3)
  }
  function loading(progress) {
    console.log("loading", "header.obj", progress)
  }
  function err(err) {
    console.error("err", err);
  }
  objLoader.load("../model/header.obj", loaded, loading, err);
}

function initGrid() {
  let helper = new THREE.GridHelper(1000, 50);
  helper.setColors(0x0000ff, 0x808080);
  scene.add(helper);
}

function initEventHandler() {
  document.body.addEventListener("mousemove", function (e) {
    e.preventDefault();
    mouse.x = e.clientX / width * 2 - 1;
    mouse.y = 1 - e.clientY / height * 2;
    // console.log("x,y", mouse.x, mouse.y);
  })
}

function init() {
  initEnv();
  initStatus();
  initMonitor();
  initObj();
  initModel();
  initGrid();
  initEventHandler();
}

function updateMonitor() {
  camera.position.x = cameraParams.x;
  camera.position.y = cameraParams.y;
  camera.position.z = cameraParams.z;
  camera.lookAt(scene.position);
  camera.updateProjectionMatrix();
}

function render() {
  renderer.render(scene, camera);
}

function animate() {
  let position = camera.position;
  let { x, y, z } = position;

  theta = (theta + 0.01) % (2 * Map.PI);
  // camera.position.x = radius * Math.sin(THREE.Math.degToRad(theta));
  // camera.position.y = radius * Math.sin(THREE.Math.degToRad(theta));
  // camera.position.z = radius * Math.cos(THREE.Math.degToRad(theta));
  objResetGroup && objResetGroup.rotateY(0.01);
  group.rotateY(0.01)
  // mesh.rotateY(0.01)
  // mesh.rotateZ(0.01)
  stats.update();
  updateMonitor();
  render();
  requestAnimationFrame(animate);
}

function main() {
  init();
  animate();
}